<!--
*** Created by zhumin on 2023/09/12.***
*** Description: "单项赛程"
-->
<template>
  <div>
    <common @getGroupData="getGroupData"></common>
    <div :class="['component-style', 'item']">
      <template>
        <div class="item-info">
          <div
            :class="['single-item', item.flag ? 'active-item' : '']"
            v-for="(item, index) in itemInfoList"
            :key="index"
            @click="changeItem(item.name)"
          >
            <template>
              <div>{{ item.name }}</div>
              <div class="item-logo" v-if="!item.name.includes('掼蛋')">
                <img :src="item.logo" alt="" />
              </div>
            </template>
          </div>
        </div>
        <div class="date-select">
          <div
            :class="['date-item', activeItemDate === item ? 'active-item' : '']"
            v-for="(item, index) in dateList"
            :key="index"
            @click="changeItemDate(item)"
          >
            {{ item }}
          </div>
        </div>
        <div class="data-table">
          <el-collapse v-model="dateListDefault">
            <el-collapse-item :name="row" v-for="(row, index) in dateDetalList" :key="index + 1">
              <template slot="title">
                <div>{{ row | dateFilter }}</div>
              </template>
              <div style="border-collapse: collapse;">
                <el-table :data="getTableData(row)" :row-class-name="tableRowClassName">
                  <el-table-column prop="StartTime" label="时间" width="100px"> </el-table-column>
                  <el-table-column label="比赛名称">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.SportItemName + ' ' + scope.row.GameName }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="报表" width="480px">
                    <template slot-scope="scope">
                      <div class="table-report">
                        <el-row :gutter="24">
                          <el-col
                            :span="24"
                            v-for="(column, index) in scope.row.files"
                            :key="index"
                          >
                            <el-col :span="6">
                              <div class="report-title" v-if="dateLine && column.IsXMLNull === '1'">
                                <span
                                  @click="
                                    goRoute(
                                      column.SportFileName,
                                      scope.row.StartTime,
                                      scope.row.SportItemName + ' ' + scope.row.GameName,
                                      scope.row.VenueName,
                                      column.FilePath,
                                      scope.row.SportItemCode
                                    )
                                  "
                                >
                                  {{ column.SportFileName }}
                                </span>
                              </div>
                              <div class="report-title-noclick" v-else>
                                <el-button type="text" disabled>
                                  <span>{{ column.SportFileName }}</span>
                                </el-button>
                              </div>
                            </el-col>
                            <el-col :span="3">
                              <template v-if="dateLine && column.IsPDFNull === '1'">
                                <div
                                  v-if="column.SportFileName !== '名次公告'"
                                  class="report report-url"
                                  @click="gotoUrl(column.FilePath)"
                                ></div>
                                <div
                                  v-else
                                  class="rank report-url"
                                  @click="gotoUrl(column.FilePath)"
                                ></div>
                              </template>
                              <template v-else>
                                <span v-if="column.SportFileName !== '名次公告'">
                                  <el-button
                                    type="text"
                                    disabled
                                    class="report-noclick"
                                  ></el-button>
                                </span>
                                <span v-else>
                                  <el-button type="text" disabled class="rank-noclick"></el-button>
                                </span>
                              </template>
                            </el-col>
                            <el-col :span="6">
                              <div class="official-text" v-if="column.IsOfficial === '1'">
                                （官方）
                              </div>
                            </el-col>
                          </el-col>
                        </el-row>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="VenueName" label="比赛地点" width="200px">
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Util from '@/assets/js/util'
import Storage from '@/assets/js/storage'
import moment from 'moment'

export default {
  created() {
    this.activeGroup = Storage.get('activeGroup') || 'intelligence'
    this.activeItemDate = this.$route.query.activeItemDate || 'ALL'
    this.getGroupData(this.activeGroup)
    // this.changeItem(this.activeItemName)
    this.getScheduleByDiscipline()
  },
  mounted() {},
  data() {
    return {
      dateLine: moment('2023-12-31 23:59:59').diff(moment(), 'seconds') >= 0 ? true : false,
      activeItemName: '围棋',
      activeItemDate: 'ALL',
      activeGroup: '',
      itemInfoList: [
        {
          name: '围棋',
          logo: require('../../assets/img/daily/GO.png'),
          flag: true
        },
        {
          name: '象棋',
          logo: require('../../assets/img/daily/CC.png'),
          flag: false
        },
        {
          name: '国际象棋',
          logo: require('../../assets/img/daily/CH.png'),
          flag: false
        },
        {
          name: '桥牌',
          logo: require('../../assets/img/daily/BR.png'),
          flag: false
        },
        {
          name: '五子棋',
          logo: require('../../assets/img/daily/GB.png'),
          flag: false
        },
        {
          name: '国际跳棋',
          logo: require('../../assets/img/daily/DR.png'),
          flag: false
        }
      ],
      dateList: [],
      dateListDefault: [],
      dateDetalList: [],
      itemDateList: [],
      itemDate: {
        perform: [
          {
            name: '掼牌（掼蛋）',
            dateList: ['ALL', '10/18', '10/19']
          }
        ],
        intelligence: [
          {
            name: '围棋',
            dateList: [
              'ALL',
              '10/26',
              '10/27',
              '10/28',
              '10/29',
              '10/30',
              '10/31',
              '11/01',
              '11/02',
              '11/03',
              '11/04'
            ]
          },
          {
            name: '象棋',
            dateList: [
              'ALL',
              '10/26',
              '10/27',
              '10/28',
              '10/29',
              '10/30',
              '10/31',
              '11/01',
              '11/02',
              '11/03',
              '11/04'
            ]
          },
          {
            name: '国际象棋',
            dateList: [
              'ALL',
              '10/26',
              '10/27',
              '10/28',
              '10/29',
              '10/30',
              '10/31',
              '11/01',
              '11/02',
              '11/03',
              '11/04'
            ]
          },
          {
            name: '桥牌',
            dateList: [
              'ALL',
              '10/26',
              '10/27',
              '10/28',
              '10/29',
              '10/30',
              '10/31',
              '11/01',
              '11/02',
              '11/03',
              '11/04'
            ]
          },
          {
            name: '五子棋',
            dateList: [
              'ALL',
              '10/26',
              '10/27',
              '10/28',
              '10/29',
              '10/30',
              '10/31',
              '11/01',
              '11/02',
              '11/03',
              '11/04'
            ]
          },
          {
            name: '国际跳棋',
            dateList: [
              'ALL',
              '10/26',
              '10/27',
              '10/28',
              '10/29',
              '10/30',
              '10/31',
              '11/01',
              '11/02',
              '11/03',
              '11/04'
            ]
          }
        ],
        public: [
          {
            name: '围棋',
            dateList: ['ALL', '10/31', '11/01', '11/02']
          },
          {
            name: '象棋',
            dateList: ['ALL', '10/26', '10/30', '10/31']
          },
          {
            name: '国际象棋',
            dateList: [
              'ALL',
              '10/26',
              // '10/30',
              // '10/31',
              '11/02',
              '11/03'
            ]
          },
          {
            name: '桥牌',
            dateList: ['ALL', '10/26', '11/02', '11/03']
          },
          {
            name: '五子棋',
            dateList: ['ALL', '10/26', '11/01', '11/02']
          },
          {
            name: '国际跳棋',
            dateList: ['ALL', '10/26', '11/01', '11/02']
          },
          {
            name: '掼牌（掼蛋）',
            dateList: ['ALL', '10/26']
          }
        ]
      },
      itemAllList: {
        intelligence: [
          {
            itemName: '围棋',
            itemCode: 'GO'
          },
          {
            itemName: '象棋',
            itemCode: 'CC'
          },
          {
            itemName: '国际象棋',
            itemCode: 'CH'
          },
          {
            itemName: '桥牌',
            itemCode: 'BR'
          },
          {
            itemName: '五子棋',
            itemCode: 'GB'
          },
          {
            itemName: '国际跳棋',
            itemCode: 'DR'
          },
          {
            itemName: '掼牌（掼蛋）',
            itemCode: 'WE'
          }
        ],
        public: [
          {
            itemName: '围棋',
            itemCode: 'PG'
          },
          {
            itemName: '象棋',
            itemCode: 'PC'
          },
          {
            itemName: '国际象棋',
            itemCode: 'PH'
          },
          {
            itemName: '桥牌',
            itemCode: 'PR'
          },
          {
            itemName: '五子棋',
            itemCode: 'PB'
          },
          {
            itemName: '国际跳棋',
            itemCode: 'PD'
          },
          {
            itemName: '掼牌（掼蛋）',
            itemCode: 'PE'
          }
        ],
        perform: [
          {
            itemName: '掼牌（掼蛋）',
            itemCode: 'WE'
          }
        ]
      }
    }
  },
  watch: {},
  computed: {
    ...mapState({
      scheduleByDiscipline: state => state.schedule.scheduleByDiscipline,
      dateDetailList: state => state.schedule.dateDetailList
    })
  },
  filters: {
    dateFilter(date) {
      if (date.includes('-')) {
        return date.replace('-', '月') + '日'
      } else if (date.includes('/')) {
        return date.replace('/', '月') + '日'
      }
    }
  },
  components: {},
  methods: {
    getDateList() {
      this.dateList = []
      this.itemDate[this.activeGroup].forEach(row => {
        if (row.name === this.activeItemName) {
          this.dateList = JSON.parse(JSON.stringify(row.dateList))
        }
      })
      this.getScheduleByDiscipline()
    },
    changeItem(itemName) {
      this.activeItemName = itemName
      this.itemInfoList.forEach(element => {
        if (itemName === element.name) {
          element.flag = true
        } else {
          element.flag = false
        }
      })
      // this.activeItemDate = 'ALL'
      this.getDateList()
    },
    changeItemDate(itemDate) {
      this.activeItemDate = itemDate
      this.getScheduleByDiscipline()
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'table-row-class'
      }
    },
    getTableData(date) {
      let resultList = []
      if (this.activeItemDate === 'ALL') {
        this.scheduleByDiscipline[this.activeGroup].forEach(item => {
          if (item.BeginDate === date) {
            resultList.push(item)
          }
        })
      } else {
        date = date.replace('/', '-')
        this.scheduleByDiscipline[this.activeGroup].forEach(item => {
          if (item.BeginDate === date) {
            resultList.push(item)
          }
        })
      }
      return resultList
    },
    gotoUrl(path) {
      if (path) {
        window.open('/api/PDF/' + path + '.PDF')
      }
    },
    goRoute(sportFileName, gameTime, gameTitle, venueName, filePath, SportItemCode) {
      let routeData = this.$router.resolve({
        path: '/item/report',
        query: {
          activeItemName: this.activeItemName,
          sportFileName: sportFileName,
          gameTime: gameTime,
          gameTitle: gameTitle,
          venueName: venueName,
          filePath: filePath,
          SportItemCode: SportItemCode
        }
      })
      window.open(routeData.href)
    },
    getGroupData(data) {
      this.activeGroup = data
      if (data === 'perform') {
        this.activeItemName = '掼牌（掼蛋）'
        this.itemDate[data].forEach(item => {
          if (item.name === '掼牌（掼蛋）') {
            if (!item.dateList.includes(this.$route.query.activeItemDate)) {
              this.activeItemDate = 'ALL'
            } else {
              this.activeItemDate = this.$route.query.activeItemDate
            }
          }
        })
      } else {
        this.activeItemName = this.$route.query.activeItemName || '围棋'
        this.activeItemDate = this.$route.query.activeItemDate || 'ALL'
      }
      if (data === 'perform') {
        this.itemInfoList = [
          {
            name: '掼牌（掼蛋）',
            logo: '',
            flag: true
          }
        ]
      } else if (data === 'intelligence') {
        this.itemInfoList = [
          {
            name: '围棋',
            logo: require('../../assets/img/daily/GO.png'),
            flag: true
          },
          {
            name: '象棋',
            logo: require('../../assets/img/daily/CC.png'),
            flag: false
          },
          {
            name: '国际象棋',
            logo: require('../../assets/img/daily/CH.png'),
            flag: false
          },
          {
            name: '桥牌',
            logo: require('../../assets/img/daily/BR.png'),
            flag: false
          },
          {
            name: '五子棋',
            logo: require('../../assets/img/daily/GB.png'),
            flag: false
          },
          {
            name: '国际跳棋',
            logo: require('../../assets/img/daily/DR.png'),
            flag: false
          }
        ]
      } else if (data === 'public') {
        this.itemInfoList = [
          {
            name: '围棋',
            logo: require('../../assets/img/daily/GO.png'),
            flag: true
          },
          {
            name: '象棋',
            logo: require('../../assets/img/daily/CC.png'),
            flag: false
          },
          {
            name: '国际象棋',
            logo: require('../../assets/img/daily/CH.png'),
            flag: false
          },
          {
            name: '桥牌',
            logo: require('../../assets/img/daily/BR.png'),
            flag: false
          },
          {
            name: '五子棋',
            logo: require('../../assets/img/daily/GB.png'),
            flag: false
          },
          {
            name: '国际跳棋',
            logo: require('../../assets/img/daily/DR.png'),
            flag: false
          },
          {
            name: '掼牌（掼蛋）',
            logo: '',
            flag: false
          }
        ]
      }
      this.changeItem(this.activeItemName)
    },
    getScheduleByDiscipline() {
      let params = ''
      this.itemAllList[this.activeGroup].forEach(item => {
        if (item.itemName === this.activeItemName) {
          params = item.itemCode
        }
      })
      this.$store
        .dispatch('getScheduleByDiscipline', 'ByDiscipline_' + params + '/Data.json')
        .then(_ => {
          if (this.activeItemDate === 'ALL') {
            this.dateDetalList = this.dateDetailList[this.activeGroup]
            this.dateListDefault = this.dateDetailList[this.activeGroup]
          } else {
            this.dateDetalList = [this.activeItemDate]
            this.dateListDefault = [this.activeItemDate]
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/item.scss';
</style>
